<template>
	<view class="pages">


		<StatusBar bgColor="bg-white"></StatusBar>

		<!--  订单搜索的开始 -->
		<view class="search-box " :style="[{height:StatusBar.height+'px'}]">
			<text class="cuIcon-back backicon clickEffict" @click="back"></text>
			<view class="input-search-box1">
				<input class="inputSearch1" type="text" value="" placeholder="输入您想查找的岗位关键词" v-model="searchOrder" />
				<text class="cuIcon-search iconsousuo" @click="search"></text>
			</view>

		</view>

		<!--  订单搜索的结束 -->
		<!-- 选择订单类型tap框开始 -->
		<view class="order-tap " :style="[{height:StatusBar.height+10+'px'}]">
			<scroll-view class="orderType-box" :scroll-y="false" :scroll-x="true">

				<view class="orderType-box1 flex ">
					
					<view class='ordertype '>
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="">{{array[index]}} 
							
							<text class="cuIcon-right right-cuicon" ></text>
						
							</view>
						</picker>
					</view>
					
					<view class='ordertype '>
						<picker @change="bindPickerChange" :value="index" :range="postArr">
							<view class="">{{postArr[index]}}</view>
						</picker>


					</view>
				</view>

			</scroll-view>

		</view>

		<!-- 选择订单类型tap框结束 -->

		<!-- 列表框 -->
		<view class="list-scroll" :style="[{height:listSroll+'px'}]">
			<view class="list-scroll-item" v-for="(item,index) in 10" :key="index" @click="jumpTo(index)">
				<view class="s-item-head   text-xl">

					<view class="basis-xl  margin-xs flex align-center text-over  text-xl">岗位名称岗位名称岗位名称</view>
					<view
						class="basis-xs  margin-xs flex align-center text-over text-right text-xl  text-blue text-bold">
						5k-8k
					</view>

				</view>
				<view class="s-item-head  text-xl">

					<view class="basis-xl  margin-xs flex align-center   text-xl">

						<view class='cu-tag radius tag-style'>月结</view>
						<view class='cu-tag radius tag-style'>全职</view>
						<view class='cu-tag radius tag-style'>男女不限</view>
					</view>


				</view>
				<view class="flex margin-top s-item-head  text-xl  ">


					<view class="cu-avatar radius lsg bg-brown">

					</view>

					<view class="item-bottom  flex flex-direction  justify-around">

						<view class="text-cut ">一叶翩舟科技有限公司</view>

						<view class="text-cut text-gray text-over">计算机软件丨100-500人</view>

					</view>
				</view>
			</view>
		</view>
	</view>




</template>

<script>
	export default {
		data() {
			return {
				title: "岗位分类",
				resDomain: this.resDomain,
				StatusBar: this.Custom,
				listSroll: 0, //列表高
				array: ['中国', '美国', '巴西', '日本'],
				postArr:['兼职','全职'],
				index: 0,


			}

		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#screen').boundingClientRect(data => {
				this.$nextTick(() => {
					this.listSroll = this.WH - data.height - data.top;
				})
			}).exec();

		},
		methods: {
			changeTab(index) {
				this.tabIndex = index;
			},
			jumpTo(index) {
				uni.navigateTo({
					url: "/app/Recruit/pages/index/infor"
				})
			}




		}



	}
</script>

<style scoped>
	.pages {
		overflow: hidden;
	}

	/**
	 * 搜索框样式
	 */
	.search-boxes {
		width: 92%;
		margin: auto;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		align-items: center;
		box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 20upx 30upx 20upx 30upx;
		position: relative;
	}

	.input-search-box1 {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;

	}

	.inputSearch1 {
		padding-left: 15rpx;
		width: 80%;
	}


	/**
	 * 筛选框样式
	 */
	.search-box {
		width: 100vw;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		align-items: center;
	}

	.input-search-box1 {
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
		background: #F7F7F7;
		border-radius: 20px;
		position: relative;
	}

	/**
	 * 列表样式
	 */
	.list-scroll {
		width: 92%;
		margin: 0 auto;
	}

	.list-scroll-item {
		width: 100%;
		min-height: 200upx;
		background: #FFFFFF;
		margin-top: 20upx;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		padding: 40upx 30upx;
	}

	.s-item-head {
		width: 100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 30upx;
		font-weight: 800;
		color: #333333;

	}

	.tag {
		margin-right: 10upx;
		border-radius: 4upx;
		font-size: 20upx;
		font-weight: bold;
		height: 40upx;
		min-width: 60upx;
		text-align: center;
	}

	.s-item-body {
		width: 100%;
		height: 40upx;
		margin-top: 10upx;
		line-height: 40upx;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.s-item-body-tab {
		width: 30%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;

	}

	.text-gray {
		padding-right: 5upx;
		opacity: 0.5;
	}

	.s-item-body-right {
		position: absolute;
		float: right;
		right: 0;
		width: 40%;
		text-align: right;
	}

	.xinzi {
		font-size: 36upx;
		font-weight: 800;
		color: #1270E0;
		padding-right: 5upx;
	}

	.s-item-foot {
		width: 100%;
		height: 40upx;
		line-height: 40upx;
		margin-top: 10upx;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		display: flex;
		flex-direction: row;
	}

	.s-item-foot-l {
		width: 70%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.s-item-foot-r {
		width: 30%;
		text-align: right;
	}

	.text-over {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.cu-avatar.lsg {
		width: 76upx;
		height: 76upx;
		font-size: 2em;
	}

	.cu-list-box {
		width: 92%;
		margin: auto;
	}

	/**
	 * tab
	 */
	.ordertype {
		margin-top: 30upx;
		width: 130upx;
		height: 60upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-tap {
		width: 100vw;
		background-color: #FFFFFFFF;
	}

	.order-tap-select {
		font-size: 28upx;
		font-weight: 800;
		color: #333333;
	}

	.order-tab-no {
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
	}

	.orderline {
		width: 30%;
		height: 6upx;
		background: #1270E0;
		border-radius: 30%;
		margin-top: 4upx;
	}
	.right-cuicon{
		transform: rotate(45deg);
		-ms-transform:rotate(9deg); /* Internet Explorer */
		-moz-transform:rotate(9deg); /* Firefox */
		-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
		-o-transform:rotate(9deg); /* Opera */
	}
</style>

<style lang="scss">
	.item-bottom {
		margin-left: 20rpx;
		width: 750*0.92-60-96rpx;
	}
</style>
